class Message {
  title = "";

  props = {
    title: "",
    children: [],
  };

  constructor(title) {
    mobx.makeAutoObservable(this);
    this.title = title;
  }

  updateTitle(title) {
    this.title = title;
  }

  updateObj(title) {
    // this.props = { title };
    this.props.title = title;
  }

  updateChildren(obj) {
    this.props.children.push(obj);
  }
}

$(function () {
  let ul$ = $("#log ul");
  function log(c) {
    ul$.append(`<li>${c}</li>`);
  }
  $("#clear").click(function () {
    ul$.empty();
  });

  let message = new Message("test");
  mobx.autorun(() => {
    log(message.props.children);
  });

  $("#test").click(function () {
    message.updateObj("aaaa");
    message.updateChildren("aaaa");
  });
});
